import React, { useCallback, useRef, useState, useEffect } from 'react'
import style from './style/CardNewDjComp.css'
import { Carousel } from 'antd'
import { Link, withRouter } from 'react-router-dom'
import { albumnewstReq } from '@/utils/api/recommend'

function CardNewDjComp({history}) {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 5,
    slidesToScroll: 5
  };

  const [currentIndex, setCurrentIndex] = useState(0)
  const [newDjs, setNewDjs] = useState([])

  const swiper = useRef(null)

  const gonextandprev = useCallback((index) => {
    if (index == 1) {
      swiper.current.prev()
    } else {
      swiper.current.next()
    }
  }, [currentIndex])

  const swiperChange = useCallback((current) => {
    setCurrentIndex(current)
  }, [])

  useEffect(async () => {
    const res = await albumnewstReq()
    if (res.data.code === 200) {
      setNewDjs(res.data.albums)
    }
  }, [])

  const goItem = useCallback((item) => {
    console.log(item, 'item');
    switch (item.type) {
      case 'Single':
        history.push(`song/${item.id}/2`)
        break;
      case "专辑":
        history.push(`song/${item.id}/2`)
        break;
      case "EP":
        history.push(`song/${item.id}/2`)
        break;
      default:
        alert('暂未开发!')
        break;
    }
  }, [])

  return (
    <div className={style.container}>
      <svg t="1606138486983" onClick={() => gonextandprev(1)} className={style.leftIcon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" width="16" height="16"><path d="M257.194667 0v274.133333L493.952 512l-236.757333 237.866667V1024l509.610666-512z" p-id="2854" fill="#515151"></path></svg>
      <Carousel {...settings} ref={swiper} afterChange={swiperChange}>
        {newDjs ? newDjs.map(item => (
          <div className={style.item} key={item.id} onClick={() => goItem(item)}>
            <div className={style.itembg}>
              <img src={item.blurPicUrl} alt={item.name} className={style.itemImg} />
            </div>
            <div>
              <Link to="#" className={[style.name, style.lineOne].join(' ')}>{item.name}</Link>
            </div>
            <div>
              <Link to="#" className={[style.author, style.lineOne].join(' ')}>
                {item.artists.map((a, i) => <div className={style.asName} key={a.id}>{i > 0 ? ' / ' : ''}{a.name}</div>)}
              </Link>
            </div>
          </div>
        )) : null}
      </Carousel>
      <svg t="1606138486983" onClick={() => gonextandprev(2)} className={style.rightIcon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" width="16" height="16"><path d="M257.194667 0v274.133333L493.952 512l-236.757333 237.866667V1024l509.610666-512z" p-id="2854" fill="#515151"></path></svg>
    </div>
  )
}

export default withRouter(CardNewDjComp)